<template>
    <div class="alert-container" v-show="isOpen">
        <div
            class="alert d-flex justify-content-between align-items-center w-50 mx-auto fixed-top mt-3"
            :class="`alert-${classNameType}`"
            role="alert"
        >
            <p class="m-0">{{ message }}</p>
            <button
                type="button"
                class="btn-close"
                data-dismiss="alert"
                aria-label="Close"
                @click="handleClose"
            ></button>
        </div>
    </div>
</template>

<script lang="ts">
import { computed, defineComponent, PropType, ref } from 'vue';

type MesssageType = 'success' | 'error' | 'warning' | 'info' | 'default';

export default defineComponent({
    props: {
        message: {
            type: String,
            required: true
        },
        type: {
            type: String as PropType<MesssageType>,
            required: false,
            default: 'default'
        }
    },
    setup(props, ctx) {
        const classNameType = computed(() => {
            if (props.type === 'error') {
                return 'danger';
            }

            if (props.type === 'default') {
                return 'dark';
            }

            return props.type;
        });

        const isOpen = ref(true);

        const handleClose = () => {
            isOpen.value = false;
        };

        return { classNameType, isOpen, handleClose };
    }
});
</script>
